<template>
	<view :data-theme="theme()" :class="theme() || ''" class="" v-if="!loadding">
		<block v-if="DataList.length > 0">
			<view class="item-wrap" v-for="(item, index) in DataList" :key="index">
				<view :class="'coupon-item coupon-item-' + item.colorText" @click="lookRule(item)">
					<view class="operation d-b-c">
						<view class="flex-1 coupon-content">
							<view class="mb20 text-ellipsis">
								<text class="f40 fb">{{ item.name }}</text>
							</view>
							<view class="f22 gray9 mb20">
								<template v-if="item.expireType == 10">
									{{$t('coupon.validity_period')}}{{ item.expireDay }}{{$t('coupon.valid_days')}}
								</template>
								<template v-if="item.expireType == 20">
									{{$t('coupon.validity_to')}}{{ item.startTimeText }}$t('coupon.valid_until',{place1: item.endTimeText })
								</template>
							</view>
							<view v-if="item.bigPrice != 0" class="f22">({{$t('coupon.max_discount',{place1: item.bigPrice })}})</view>
						</view>
						<view class="right-box d-c-c d-c">
							<view class="theme-price mb10" v-if="item.couponType == 10">
								<text class="f24">HK$</text>
								<text class="f52 fb">{{ item.reducePrice * 1 }}</text>
							</view>
							<view class="mb10 theme-price" v-if="item.couponType == 20">
								<text class="f52 fb">{{ item.discount / 10 }}</text>
								<text class="f24">{{$t('coupon.discount')}}</text>
							</view>
							<view class="f24 mb10">{{ item.minPrice > 0 ? $t('coupon.min_purchase') + item.minPrice * 1 + $t('coupon.usable_amount') : $t('coupon.no_threshold') }}</view>
							<view v-if="item.state.value > 0" class="f26 coupon-btn theme-btn" v-on:click.stop="receive(item.couponId)">{{$t('coupon.claim')}}</view>
							<button type="default" v-else class="f26 coupon-btn btn-gray white" v-on:click.stop>{{ item.state.text }}</button>
						</view>
					</view>
				</view>
				<view
					class="range_item d-b-c"
					v-if="item.applyRange == 20"
					@click.stop="gotoPage('/pages/coupon/detail?couponId=' + item.couponId + '&applyRange=' + item.applyRange)"
				>
					<view class="gray9 f24">
						{{$t('coupon.limited_items')}}
						<text class="icon iconfont icon-jiantou" style="color: #999999; font-size: 22rpx;"></text>
					</view>
					<view class="gray9 f24">{{$t('coupon.no_transfer')}}</view>
				</view>
				<view
					class="range_item d-b-c"
					v-else-if="item.applyRange == 30"
					@click.stop="gotoPage('/pages/coupon/detail?couponId=' + item.couponId + '&applyRange=' + item.applyRange)"
				>
					<view class="gray9 f24">
						{{$t('coupon.limited_category')}}
						<text class="icon iconfont icon-jiantou" style="color: #999999; font-size: 22rpx;"></text>
					</view>
					<view class="gray9 f24">{{$t('coupon.no_transfer')}}</view>
				</view>
				<view class="range_item d-b-c" v-else>
					<view class="gray9 f24">
						{{$t('coupon.sitewide')}}
						<text class="icon iconfont icon-jiantou" style="color: #999999; font-size: 22rpx;"></text>
					</view>
					<view class="gray9 f24">{{$t('coupon.no_transfer')}}</view>
				</view>
			</view>
		</block>
		<block v-else>
			<view class="none-data-box">
				<image src="/static/none.png" mode="widthFix"></image>
				<text>{{$t('coupon.no_data')}}</text>
			</view>
		</block>
	</view>
</template>

<script>
export default {
	data() {
		return {
			/*是否加载完成*/
			loadding: true,
			indicatorDots: true,
			autoplay: true,
			interval: 2000,
			duration: 500,
			DataList: [],
			/*当前页面*/
			page: 1,
			/*每页条数*/
			list_rows: 10
		};
	},
	onShow() {
		uni.showLoading({
			title: this.$t('coupon.loading')
		});
		/*获取优惠券列表*/
		this.getData();
		uni.setNavigationBarTitle({
			title: this.$t('common.coupon_center')
		})
	},
	methods: {
		/*获取数据*/
		getData() {
			let self = this;
			self._get('coupon/coupon/lists', {}, function(res) {
				self.DataList = res.data;
				console.log(self.DataList);
				self.loadding = false;
				uni.hideLoading();
			});
		},
		/*查看规则*/
		lookRule(item) {
			item.rule = true;
		},

		/*关闭规则*/
		closeRule(item) {
			item.rule = false;
		},

		/*领取优惠券*/
		receive(e) {
			let self = this;
			uni.showLoading({
				title: this.$t('coupon.claiming')
			});
			self._post(
				'user/coupon/receive',
				{
					couponId: e
				},
				function(res) {
					uni.hideLoading();
					self.getData();
					uni.showToast({
						title: self.$t('coupon.claim_success'),
						duration: 2000,
						icon: 'success'
					});
				}
			);
			self.getData();
		}
	}
};
</script>

<style>
</style>
